<template>
    <div class="content avatar">
        <div class="avatar_all box">
            <div class="avatar_img">
                <img :src="oldImg" alt="原头像" >
            </div>
            <div class="avatar_change">
                <div class="avatar_change_word">
                    更换
                </div>
                <van-uploader :after-read="afterRead" :max-count="1"/>
            </div>

        </div>
        <!-- <van-uploader
            v-model="fileList"
            :max-count="1"
            :after-read="afterRead" />
        <div>
            :img="fileList[0].content"

          <button class="save" @click = "onSaveBtn()">保存</button>
        </div> -->
        <vue-cropper
            v-if="show"
            class="cropper-content"
            ref="cropper"
            :img="fileList[0].content"
            :outputSize="0.8"
            outputType="jpeg"
            :info="true"
            :full="false"
            :canMove="false"
            :fixed="true"
            :fixedBox="false"
            :origin="false"
            :canMoveBox="true"
            :autoCrop="true"
            :autoCropWidth="300"
            :autoCropHeight="300"
            :centerBox="false"
            :high="true"
            :round = "true"
            mode="100% auto"
          >
        </vue-cropper>
        <div
            class="cropper-btn-content"
            v-if="show"
        >
          <span class="left" @click="cancelCropper">
              取消
          </span>
          <span class="right" @click="sureCropper">
              确认
          </span>
        </div>
    </div>
</template>
<script>
    import { Toast } from 'vant'
    import { settingAvatar } from "@/api/setting";
    import Vue from 'vue'
    import { Uploader } from 'vant';
    import VueCropper from 'vue-cropper'

    Vue.use(Uploader)
    Vue.use(VueCropper)
    export default {
        name: 'test',
        data () {
            return {
                fileList: [],
                show: false,
                blobFile: '',
                oldImg: ''
            }
        },

        methods: {
            afterRead(e) {
               this.fileList = [{content: e.content}]
                this.show = true
            },
            cancelCropper() {
                this.fileList = []
                this.show = false
            },
            sureCropper() {
                const that = this

                this.$refs.cropper.getCropData((data) => {
                  that.fileList = [{content: data}]
                })
                this.$refs.cropper.getCropBlob((data) => {
                    this.blobFile = data
                })
                const toast = Toast.loading({
                  duration: 0,
                  message: '头像上传中...',
                });
                let formData = new FormData()
                formData.append('file', this.blobFile)
                settingAvatar(formData).then(res => {
                    toast.clear()
                    if (res.code === 20000) {
                        Toast.success({message: "设置成功", duration: 2000});
                        that.show = false
                        this.$router.go(-1);
                    } else {
                        Toast.fail({message: res.info, duration: 2000});
                    }
                }).catch(e=>{
                    toast.clear()
                    Toast.fail({message: '网络异常', duration: 2000});
                })

            },
            onSaveBtn() {
                if (this.blobFile === '') {
                    Toast.fail({message:'请先选择文件', duration: 1000});
                    return;
                }

            }
        },

        activated() {
            this.blobFile = ''
            this.fileList = [{content: this.$store.state.userInfo.avatar, isImage: true}]
            this.oldImg = this.$store.state.userInfo.avatar
        },

    }
</script>
<style lang="stylus" scoped>
    .content >>> .cropper-view-box
        outline:none!important;
        outline-color: none!important;
        border-radius: 50%!important;
    .content >>> .crop-point
        display none!important
    .content >>> .crop-line
        display none!important
    .content >>>  .crop-info
        display none!important
    .content >>> .cropper-face
        background-color #4a3f3f
    .content >>> .cropper-modal
        background: rgba(0, 0, 0, .7);
    .content
        width 100%
        height 100vh
        background #000
        .avatar_all
            width 100%
            height 100%
            overflow hidden
            position relative
            .avatar_img
                width 100%
                height 5rem
                overflow hidden
                position absolute
                top 50%
                left 50%
                transform translate(-50%, -50%)
                img
                    width 100%
            .avatar_change
                width 1.7rem
                height 1.7rem
                overflow hidden

                position absolute
                bottom .2rem
                left 50%
                transform translate(-50%, 0)
                .avatar_change_word
                    font-size .26rem
                    color #fff
                    text-align center
                    background #514b4b
                    width 1.5rem
                    height .5rem
                    line-height .5rem
                    position absolute
                    top 50%
                    left 50%
                    transform translate(-50%, -50%)
                .van-uploader
                    opacity 0
                    position absolute
        .save
            width: 200px
            height: .9rem
            line-height: .9rem
            overflow: hidden
            border-radius: 8px
            border: 1px solid #d64532
            background: #d64532
            margin: 60px auto
            color: #fff
        .van-uploader__upload
            width: 150px!important
            height: 150px!important
            border: 1px solid #ddd
        .van-uploader__preview-image
            width: 150px!important
            height: 150px!important
        .cropper-content
            position: fixed!important
            top: 0
            background #000
        .cropper-btn-content
            z-index: 99999
            position: fixed
            bottom: 0
            span
                font-size: .33rem;
                font-weight: bold;
                position: fixed;
                bottom: 15px;
            .left
                left: 15px;
                color: white;
            .right
                color: #d64532;
                right: 15px;
</style>
